<template>
    <div class="member-box">
        <div class="biaoqian" :class="{active:cur==item._id}" v-for="item in lable" :key="item._id" @click="cur=item._id"> {{item.text}}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                lable: [{
                        _id: 1,
                        text: '用户设置标签1'
                    },
                    {
                        _id: 2,
                        text: '用户设置标签1'
                    },
                    {
                        _id: 3,
                        text: '用户设置标签1'
                    },
                    {
                        _id: 4,
                        text: '用户设置标签1'
                    },
                    {
                        _id: 5,
                        text: '用户设置标签1'
                    },
                    {
                        _id: 6,
                        text: '用户设置标签1'
                    },
                    {
                        _id: 7,
                        text: '用户设置标签1'
                    },
                    {
                        _id: 8,
                        text: '用户设置标签1'
                    },
                    {
                        _id: 9,
                        text: '用户设置标签1'
                    },
                ],
                cur:""
            }
        },
      computed:{
        //  ...mapState([]),
         isshow:{
              get(){
               return  this.$store.state.member.isshow
              },
              set(val){
                this.$store.state.member.isshow = val;
              }
         }

        },
    }
</script>

<style lang='scss' scoped>
    .member-box {
        width: 90%;
        /* height: 200px; */
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;

        .biaoqian {
            width: 30%;
            height: 25px;
            border: 1px solid #5ab3ff;
            border-radius: 15px;
            color: #5ab3ff;
            margin: 5px;
            line-height: 25px;
        }
    }

    .active {
        background-image: linear-gradient(90deg, #0af, #0085ff);
        color: white  !important;
    }
</style>